<template>
  <!--快捷查询-->
  <el-card 
    class="box-card"
    :body-style="{ padding: '7px',height: '63px' }"
  >
    <el-scrollbar style="min-width:700px;height: 60px;">
      <div style="position: absolute;right: 5px; top:0px;z-index: 100;">
        <!--更多查询的按钮-->
        <el-button type="primary" round @click="state.showMoreFind=true">更多</el-button>
      </div>
      <div :style="'width: '+( 160 + state.quickFind.length * 290)+'px;'">
        <!--快捷查询按钮-->
        <div style="float:left;width: 90px;">
          <!--选择查询方案-->
          <find-case></find-case>
        </div>
        <!--快捷查询的字段-->
        <div style="float:left;min-width: 550px;" :style="'width: '+(state.quickFind.length * 290)+'px;'">
          <div
            :style="'float:left;width:' + (state.findModel[colId].useKind === 17 ? 480: 260) + 'px;padding-top:4px;'"
            v-for="(colId, index) in state.tmpQuickFind"
            :key="'quick_' + colId + '_' + index"
          >
            <!--查询字段-->
            <find-item :columnId="colId"></find-item>
          </div>
        </div>
      </div>
    </el-scrollbar>

  </el-card>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import { getFindState } from '../state/state-find'
  // 查询字段
  import findItem from './find-item.vue'
  // 组件
  import findCase from './s-findcase.vue'

  /**
   * 快捷查询，显示常用的查询字段
   */
  export default defineComponent({
    name: 'nf-el-find-quick',
    components: {
      findItem,
      findCase
    },
    props: {
    },
    setup() { // props, context
      // 获取状态
      const state = getFindState()

      return {
        state
      }
    }
  })
</script>